<template>
  <div class='mask' v-show='maskShow'>
    <div class='outer'>
      <span @click.stop='changeMask'></span>
      <h2>平台公告</h2>
      <div id="mask-inner">
        <el-tabs tab-position="left"  style="height: 400px;">
          <el-tab-pane label="本站会员必读" >
            <div class='mask-text'>
              <div v-for='item in itemCon'>
                <h3>{{item.tit}}</h3>
                <p v-html="item.con"></p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="提款注意事项">
            <div class='mask-text'>
              <div v-for='item in itemCon'>
                <h3>{{item.tit}}</h3>
                <p v-html="item.con"></p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="注册时用户注意事项">
            <div class='mask-text'>
              <div v-for='item in itemCon'>
                <h3>{{item.tit}}</h3>
                <p v-html="item.con"></p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="充值提款">
            <div class='mask-text'>
              <div v-for='item in itemCon'>
                <h3>{{item.tit}}</h3>
                <p v-html="item.con"></p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="规则说明">
            <div class='mask-text'>
              <div v-for='item in itemCon'>
                <h3>{{item.tit}}</h3>
                <p v-html="item.con"></p>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      maskShow: true,
      itemCon: [
        {
          tit: '1、如何提款？',
          con: '· 用户登录后点击首页右侧的“提款”进入提款页面，在提款页面输入提款金额及提款密码并确认。<br />· 您的提款申请成功并经核对无误后，将通过银行转账方式提款，3到5分钟实时到账。支持全国所有大小银行。<br />· 为了保障您的资金安全，公司提供7X24小时一对一服务。'
        },
        {
          tit: '1、如何提款？',
          con: '· 用户登录后点击首页右侧的“提款”进入提款页面，在提款页面输入提款金额及提款密码并确认。<br />· 您的提款申请成功并经核对无误后，将通过银行转账方式提款，3到5分钟实时到账。支持全国所有大小银行。<br />· 为了保障您的资金安全，公司提供7X24小时一对一服务。'
        },
        {
          tit: '1、如何提款？',
          con: '· 用户登录后点击首页右侧的“提款”进入提款页面，在提款页面输入提款金额及提款密码并确认。<br />· 您的提款申请成功并经核对无误后，将通过银行转账方式提款，3到5分钟实时到账。支持全国所有大小银行。<br />· 为了保障您的资金安全，公司提供7X24小时一对一服务。'
        },
        {
          tit: '1、如何提款？',
          con: '· 用户登录后点击首页右侧的“提款”进入提款页面，在提款页面输入提款金额及提款密码并确认。<br />· 您的提款申请成功并经核对无误后，将通过银行转账方式提款，3到5分钟实时到账。支持全国所有大小银行。<br />· 为了保障您的资金安全，公司提供7X24小时一对一服务。'
        },
        {
          tit: '1、如何提款？',
          con: '· 用户登录后点击首页右侧的“提款”进入提款页面，在提款页面输入提款金额及提款密码并确认。<br />· 您的提款申请成功并经核对无误后，将通过银行转账方式提款，3到5分钟实时到账。支持全国所有大小银行。<br />· 为了保障您的资金安全，公司提供7X24小时一对一服务。'
        },
        {
          tit: '1、如何提款？',
          con: '· 用户登录后点击首页右侧的“提款”进入提款页面，在提款页面输入提款金额及提款密码并确认。<br />· 您的提款申请成功并经核对无误后，将通过银行转账方式提款，3到5分钟实时到账。支持全国所有大小银行。<br />· 为了保障您的资金安全，公司提供7X24小时一对一服务。'
        }
      ]
    }
  },
  methods: {
    changeMask () {
      this.maskShow = !this.maskShow
    }
  }
}
</script>

<style lang='less'>
  .mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 20000;
    .outer {
      overflow: hidden;
      position: absolute;
      top: 50px;
      left: 50%;
      width: 800px;
      margin-left: -400px;
      border-radius: 5px;
      background-color: #fff;
      box-shadow: 0 0 0 5px rgba(255,255,255,0.3);
      #mask-inner {
        padding: 20px 0;
      }
      h2 {
        width: 100%;
        background: -moz-linear-gradient(top, #e4393c 50%, #f16f5c 100%, #f02f17 100%, #f6290c 100%, #e73827 100%);
        background: -webkit-linear-gradient(top, #e4393c 50%,#f16f5c 100%,#f02f17 100%,#f6290c 100%,#e73827 100%);
        background: -ms-linear-gradient(top, #e4393c 50%,#f16f5c 100%,#f02f17 100%,#f6290c 100%,#e73827 100%);
        background: linear-gradient(to bottom, #e4393c 50%,#f16f5c 100%,#f02f17 100%,#f6290c 100%,#e73827 100%);
        line-height: 50px;
        font-size: 18px;
        color: #fff;
        text-align: center;
      }
      span {
        display: block;
        position: absolute;
        right: 10px;
        top: 10px;
        width: 15px;
        height: 15px;
        background: url('../../../static/img/close.png') center no-repeat;
        background-size: cover;
        cursor: pointer;
      }
    }
  }
  #mask-inner .el-tabs__item.is-active,
  #mask-inner .el-tabs__item:hover {
    color: #e4393c;
  }
  #mask-inner .el-tabs__active-bar {
    background-color: #e4393c;
  }
  #mask-inner .mask-text {
    overflow: auto;
    height: 400px;
    text-align: left;
    h3 {
      line-height: 28px;
      color: #e4393c;
    }
    p {
      line-height: 24px;
    }
  }
</style>
